function banner(count, base_time, delay_time) {
    var $ul = $(".container .banner ul");
    var $ol = $(".container .banner ol");
    var bg_position = -800 / count;
    for (var i = 0; i < count; i++) {
        if (i >= count - (count - 1) / 2) {
            $ul.append(
                "<li style='z-index:" + -i + ";transition:" + base_time + "s " + i * delay_time + "s;width:" + -bg_position + "px'>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "</li>");
        } else {
            $ul.append(
                "<li style='z-index:" + i + ";transition:" + base_time + "s " + i * delay_time + "s;width:" + -bg_position + "px'>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "<div style='background-position:" + bg_position * i + "px'></div>" +
                "</li>");
        }
    }
    $(".container .banner ol").show();
    $ol.find("li").click(function () {
        var index = $(this).index();
        $ul.find("li").finish().css({
            "transform": "rotateX(" + index * 90 + "deg)"
        });
    })
}

/*banner(份数，基础时间，延迟时间)
  banner(count,base_time,delay_time)

	测试结果：当满足以下条件时，效果最好
	if(count>=100){
		base_time = 1
		delay_time = 0.01;
	}
	if(count<100){
		base_time = 1
		delay_time = 0.1;	
	}
*/
$("#count").val(10)
$("#base_time").text(1);
$("#delay_time").text(0.1);
banner(10, 1, 0.1);


$(function () {
    $("#config").find("#count").keyup(function () {
        $(".container .banner ol").hide();
        $(".container .banner ul").html("");
        var count = $(this).val();
        if (count <= 10) {
            $("#base_time").text(0.5);
            $("#delay_time").text(0.1);
            banner(count, 0.5, 0.1)
        } else if (count <= 50) {
            $("#base_time").text(1);
            $("#delay_time").text(0.03);
            banner(count, 1, 0.03);
        } else if (count <= 100) {
            $("#base_time").text(1);
            $("#delay_time").text(0.02);
            banner(count, 1, 0.02);
        } else if (count < 1000) {
            $("#base_time").text(1);
            $("#delay_time").text(count / 30000);
            banner(count, 1, count / 30000);
        } else {
            alert("大于1000分可能会很卡,不要再尝试啦！");
        }

    });

})